/* 
  @author Huhaozhi
  2022/2/7
*/
<template>
  <div class="flex flex-col h-full max-w-full">
    <div v-if="isBread" class="bread">
      <el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item>{{ topMenu.label }}</el-breadcrumb-item> -->
        <el-breadcrumb-item v-for="(data, index) in breadLabel" :key="index">{{ data }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="px-3 pt-3 flex flex-wrap shadow-sm justify-between" ref="tableInline">
      <div v-if="isQuery" class="flex flex-wrap hu_flex_shrink" @keyup.enter.stop="search">
        <el-form-item prop="searchModel.keyword">
          <el-input v-if="isKeyword" v-model="searchModel.keyword" placeholder="请输入关键字" />
        </el-form-item>
        <slot name="inlineSearch" :searchModel="searchModel"></slot>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">筛选</el-button>
        </el-form-item>
        &nbsp;&nbsp;
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </div>

      <slot name="tool" :searchModel="searchModel"></slot>
    </div>
    <div class="search_block"></div>
    <div class="h-0 flex-1 flex flex-col" style="padding: 10px; padding-bottom: 5px;">
      <el-table :data="tableData.list" class="flex-1" stripe style="width: 100%" height="100%"
        v-loading="tableData.loading">
        <slot name="cols"></slot>
      </el-table>
      <el-pagination v-if="!list" v-model:currentPage="pagenation.page" :page-size="pagenation.size"
        layout="total, sizes, prev, pager, next, jumper" :total="pagenation.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
/* 
  插槽
  inlineSearch 行内筛选
  tool 顶部工具按钮
  cols 表格列
*/
import { Search } from '@element-plus/icons-vue'
import { reactive, toRef, onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";


defineExpose({
  loadData
})
const props = defineProps({
  api: {
    type: Object,
    default: () => ({})
  },
  isKeyword: {
    type: Boolean,
    default: false
  },
  isBread: {
    type: Boolean,
    default: false
  },
  total: {
    type: String,
    default: 'total'
  },
  listKey: {
    type: String,
    default: 'list'
  },
  isSearch: {
    type: Boolean,
    default: true
  },
  beforeLoadData: {
    type: Function
  },
  beforeAdd: {
    type: Function
  },
  beforeEdit: {
    type: Function
  },
  list: {
    type: Boolean,
    default: false
  }
})
interface TableData {
  searchModel: any;
  [propsName: string]: any
}

const {
  api,
  isKeyword,
  listKey,
  isSearch,
  list
} = props;
/* 路由 */
const route = useRoute();


/* 面包屑 */
const breadLabel: any[] = route.matched.map((v: any) => {
  return v.meta.label
}).filter(v => v)
/* 表格 */
const tableInline = ref();
const tableData: TableData = reactive({
  list: [],
  searchModel: {},
  loading: false
});
const searchModel = toRef(tableData, "searchModel");

const pagenation = reactive({
  page: 1,
  size: 10,
  total: 0
})

const isQuery = computed(() => {
  return isSearch
  /* console.log(slot)
  if (slot.inlineSearch) {
    return true
  } else {
    return false
  } */
})
/* 生命周期 */
onMounted(() => {
  loadData()
})
/* 方法 */
function loadData(page: number = pagenation.page, size: number = pagenation.size): object {
  return new Promise(resolve => {
    const { total, beforeLoadData } = props
    let search = {}
    tableData.loading = true;
    if (beforeLoadData) {
      search = beforeLoadData(tableData.searchModel)
    } else {
      search = tableData.searchModel
    }

    if (list) {
      api.list(search).then((res: any) => {
        tableData.list = res
        tableData.loading = false;
        resolve(res)
      })
    } else {
      api.page(search, page, size).then((res: any) => {
        console.log(res, 'table')
        tableData.list = res[listKey];
        pagenation.total = res[total];
        tableData.loading = false;
        resolve(res)
      })
    }
  })
}
function search(): void {
  loadData()
}
function reset(): void {
  tableData.searchModel = {}
}

/* 分页器函数 */
function handleCurrentChange(page: number): void {
  pagenation.page = page;
  loadData()
}
function handleSizeChange(size: number): void {
  pagenation.size = size;
  loadData()
}
</script>

<style lang="scss">
.search_block {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}

.hc-query-item {
  width: 12rem;
  margin: 0 0.75rem 0.75rem 0;
}

.hc-query-item-2 {
  margin: 0 0.75rem 0.75rem 0;
  width: 24.75rem;
}

.bread {
  height: 20px;
  display: flex;
  align-items: flex-end;
  padding-left: 13px;
}
</style>